import { createContext, CSSProperties } from 'react'
import classNames from 'classnames'
import { DISPLAY_NAME_MENU_ITEM } from './MenuItem'
import { DISPLAY_NAME_SUB_MENU } from './SubMenu'

type SelectCallback = (selectIndex: string) => void
export interface IMenuContext {
  index: string
  mode?: MenuMode
  defaultOpenSubMenus?: string[]
  onSelect?: SelectCallback
}
type MenuMode = 'horizontal' | 'vertical'
export interface MenuProps {
  /**默认高亮的index值 */
  defaultIndex?: string
  /**需要默认展开的subMenu。如：['2']则默认展开index为'2'的subMenu */
  defaultOpenSubMenus?: string[]
  className?: string
  /**菜单的展示模式 */
  mode?: MenuMode
  style?: CSSProperties
  /**按钮点击后触发的函数 (index) => {} index为被点击item的index值 */
  onSelect?: SelectCallback
}

export const allowChildType = [DISPLAY_NAME_MENU_ITEM, DISPLAY_NAME_SUB_MENU]

export const MenuContext = createContext<IMenuContext>({ index: '0' })

// 获取组件配置的class
export const getMenuClassNames = (props: MenuProps) => {
  const { className, mode } = props

  return classNames('menu', className, {
    'menu-horizontal': mode === 'horizontal',
    'menu-vertical': mode === 'vertical',
  })
}
